import { ProDescriptions } from '@ant-design/pro-components';
import { Divider, Modal, Tabs, Typography } from 'antd';
const { Title } = Typography;

interface Iprops {
  isShowExercise: (show: boolean) => void;
  exerciseisModalOpen: boolean;
  exerciseId: number | undefined;
}
const ExercisePrescriptionInfo = (props: Iprops) => {
  const { isShowExercise, exerciseisModalOpen, exerciseId } = props;

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      align: 'center',
    },
    {
      title: '运动名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '运动部位',
      dataIndex: 'parts',
      key: 'parts',
      align: 'center',
    },
    {
      title: '持续时间',
      dataIndex: 'time',
      key: 'time',
      align: 'center',
    },
    {
      title: '重复次数',
      key: 'repeatTimes',
      dataIndex: 'repeatTimes',
      align: 'center',
    },
    {
      title: '操作',
      hideInSearch: true,
      key: 'action',
      align: 'center',
      valueType: 'option',
      render: (_: any, record: any) => [
        <a
          key="shijiao"
          onClick={() => {
            // PlayVideo(true, record.teachingVideo);
          }}
        >
          播放示教
        </a>,
        <a
          key="genlian"
          onClick={() => {
            // PlayVideo(true, record.followUpVideo);
          }}
        >
          播放跟练
        </a>,
      ],
    },
  ];
  return (
    <Modal
      title="评估详情"
      open={exerciseisModalOpen}
      onCancel={() => isShowExercise(false)}
      footer={null}
      width={1100}
    >
      <Divider />
      <Typography>
        <ProDescriptions
          column={4}
          // style={{
          //   padding: '20px 20px 0 20px',
          // }}
          // dataSource={prescriptionInfo}
          columns={[
            {
              title: '处方编号',
              key: 'code',
              dataIndex: 'code',
            },
            {
              title: '血压评估',
              dataIndex: 'patientType',
              // render: (text) => {
              //   const values = text.split(' ');
              //   return values[0];
              // },
            },
            {
              title: '血糖评估',
              dataIndex: 'patientType',
              // render: (text) => {
              //   const values = text.split(' ');
              //   return values[1];
              // },
            },
            {
              title: '体型评估',
              dataIndex: 'patientType',
              // render: (text) => {
              //   const values = text.split(' ');
              //   return values[2];
              // },
            },
          ]}
        ></ProDescriptions>
        <Tabs>
          {/* {prescriptionInfo.videoList.map((item, index) => {
              return (
                <TabPane tab={item.typeName} key={index}>
                  <ProTable
                    columns={columns}
                    dataSource={item.list}
                    rowKey={(record) => record.motionId + Math.random()}
                    search={false}
                    options={false}
                    size="middle"
                    toolBarRender={false}
                    pagination={false}
                    dateFormatter="string"
                  />
                </TabPane>
              );
            })} */}
        </Tabs>
      </Typography>
    </Modal>
  );
};
export default ExercisePrescriptionInfo;
